// 一、创建路由
// 1.1 安装 npm i vur - router
// 1.2 src 文件夹里面新建 store 文件夹里面新建 index.ts
// 1.3  导入 hash 模式跟路由实例
import { createWebHashHistory, createRouter, RouteRecordRaw } from 'vue-router'

import Login from '../views/Login/Login.vue'
import { useUserStore } from '@/store/UserStore/userStore';
import { ApiCurrentInfo } from '@/http/api';
import { generateMenu } from '@/utils';
import Home from '@/views/Home/Home.vue'
 
// 1.4 创建每个路由
// const routes = [];
// 1.5约束routes的类型
const routes: RouteRecordRaw[] = [
  // 三十、数据可视化 echarts 饼图
  // 30.1隐藏该代码
  // {
  //   path: '/',
  //   redirect: '/home'
  // },
  {
    path: "/login",
    // 11.32 name 属性
    name: "login",
    // component: () => import('../views/Login/Login.vue')
    component: Login,
  },
  // 30.2隐藏以下代码
  // 15.8先将home路由隐藏
  // {
  //   path: '/home',
  //   // 11.33 name 属性
  //   name: '',
  //   component: Home,
  // }
  // 30.3重新配置path
  {
    path: "/",
    name: "",
    component: Home,
    // 30.4配置 echarts 的路由
    children: [
      {
        path: "home",
        name: "home",
        // 30.5在 views 文件夹里面的 Home 文件夹里面的 Echarts.vue 文件，然后再懒加载
        // 30.6去到 Echarts.vue 的文件
        component: () => import("@/views/Home/Echarts.vue"),
      },
    ],
  },
 
];

// 1.6创建路由实例
const router = createRouter({
  routes,
  history: createWebHashHistory(),
})

// 9.17 需要在路由前置守卫来判断
//@ts-ignore

// 9.44使用 async await 请求数据，然后回去 AsideMenu 文件夹里面的 index.vue
router.beforeEach(async (to, from, next) => {
  // 9.18获取token
  let token = localStorage.getItem('token');

  // 9.19注意：不能在函数之外使用 useXXXStore
  const userStore = useUserStore();

  // 十二、如果在已经登录的情况下，不让用户手动跳转到登录
  // if (token && to.path == '/login') {
  //   // 12.1跳回原来的页面
  //   next(from.fullPath)
  // }else 

  // 判断 /login 路由
  if (to.path == '/login') {
    // 如果已经有 token
    if (token) {
      // 调试原来的页面
      next(from.fullPath)
    }
  } else {
    // 如果没有 token，则跳转到 /login
    if (!token) {
      next('/login')
    }
  }

  

  // 9.20判断 pinia 里面有没有当前用户的权限数据，如果有就不做事情，数据是从pinia里面来的，所以是判断 pinia 里面的数据是否存在
  // 如果没有，需要向服务器请求对应权限回来，然后记得存到 pinia 里面
  if (token && userStore.routesList.length === 0) {
    // 9.21发送请求 ApiCurrentInfo
    await ApiCurrentInfo().then(res => {
      // 9.22请求成功的逻辑
      if (res.code === 200) {
        // 9.23查看请求回来的数据
        // console.log(res.data);
        // console.log(res.data.menus);
        
        // 9.24存储用户权限数据到pinia中
        // 9.25 这个时候 res.data.menus 报错，所以我们需要定义 res.data 的数据类型，去到 api.d.ts 文件里面
        userStore.routesList = res.data.menus

        // 11.6获取用户名赋值给 pinia
        // 11.7去定义仓库的数据，去到 store 文件夹里面的 index.ts
        userStore.userName = res.data.username

        // 10.13在这里生成动态路由
        // 10.14动态路由确定是两层 {path: '', component: , children: [{path: '', componnet:}]}
        // 10.15定义一个变量去调用 utils 文件夹里面的 index.ts 的 generateMenu 方法
        let list = generateMenu(res.data.menus)

        // 10.16遍历 arr，生成动态路由表格
        list.forEach(parent => {
          // 10.17定义一个变量对象，一级路由，约束类型
          const routeObj: RouteRecordRaw = {
            // 10.18后端返回的数据，就是使用 name 属性存在的路由的 path
            // 10.19一级路由需要拼接 /
            path: '/' + parent.name,
            // 10.20一级路由组件就是 Home
            component: Home,
            // 10.21children为空数组
            children: [],
            // 11.34添加 name 属性
            // name: parent.name
            // 15.8将这里的name改成title，因为面包屑需要中文title
            name: parent.title

          }
          //10.22再遍历一级路由里面
          parent.children?.forEach(child => {
            const childRoute: RouteRecordRaw = {
              // 10.23 二级路由不需要拼接 /，自动生成的
              path: child.name,
              // 10.24 component要自动生成
              // component: ,
                
              // 10.28我们要和后端约定好，组件的命名和位置 ， 目前我们的约束是： 父级的name是文件夹，子级的name是组件名称
              // 10.29然后 node .\initpage.js 运行生成文件
              // 10.30然后去到 AsideMenu 文件夹里面的 index.vue
              // 10.34所以这里我们要找到views文件夹
              // component: () => import(`/${parent.name}/${child.name}.vue`)
              component: () => import(`../views/${parent.name}/${child.name}.vue`),
              // 11.35添加 name 属性
              // 11.36去到 utils 文件夹里面的 index.ts
              // name: child.name
              // 15.9将这里的name改成title，因为面包屑需要中文title
              // 15.10去到 Breadcrumb.vue 文件
              name: child.title
            }
            routeObj.children.push(childRoute);
          })
          // 10.25动态添加使用 addRoute 到路由表里面
          router.addRoute(routeObj)
          
        })
        // 10.26打印查看
        // 10.27先黏贴 initpage.js 的文件
        // console.log(router.getRoutes());
        
        // 10.37因为addRote是异步的，异步的代码执行时需要时间的
        // 10.38在这里使用跳转让页面显示出来,当addRoute在执行的过程中，next()时立即执行，此时路由表里面还是没有路由的，需要让跳转重新进来路由前置守卫，因为next也是异步的，所以next这个异步会在addRoute异步执行完之后再执行
        // 10.39这个时候传参，也不是放行
        // 10.40去到 AsideMenu 文件夹里面的 index.vue
        next(to.fullPath)
      }
    })
  }else {
    // 10.36将next放这里
    next()
  }
  // 10.35这里我们不是立即放行了，有路由我们才放行
  // next()
  
})

// 1.7导出路由实例,去到 main.ts 注册
export default router